import React, { useEffect, useState, Component, useRef } from 'react';
import { fetchSync } from '@/utils/request';
import { history } from 'umi';
import { connect, router } from 'dva';

import enUS from 'antd/es/locale/en_US';
import {
    Menu, Switch, Divider, Checkbox, Button, Row, Col, Tooltip, notification, Skeleton,
    Form, Modal, Select, Tree, Icon, Radio, Table, Tag, Pagination, Input, Space, message, Card, Tabs, Collapse, Image, ConfigProvider
} from 'antd';
import {
    MailOutlined, AppstoreOutlined, SettingOutlined, AudioOutlined, CommentOutlined, HomeFilled, WechatFilled, EnvironmentFilled,
    UserOutlined, ArrowRightOutlined, HomeTwoTone,MoneyCollectOutlined
} from '@ant-design/icons';

import styles from './mymenu.less';
import { getUserName } from '@/utils/loginAssert';


export default (props) => {

    const [activeItem, setActiveItem] = useState('Home') //  Home ， Sports， User , Moments, Profit

    useEffect(async () => {
        props.clickItem(activeItem)
    }, [activeItem])

    return (
        <div className={styles.menu}>
            <div className={styles.item} onClick={() => setActiveItem('Home')}>
                <HomeFilled style={{ color: activeItem === 'Home' ? '#1890ff' : '#ccc' }} />
                <span style={{ color: activeItem === 'Home' ? '#1890ff' : '#ccc' }}>Home</span>
            </div>
            <div className={styles.item} onClick={() => setActiveItem('Moments')}>
                <WechatFilled style={{ color: activeItem === 'Moments' ? '#1890ff' : '#ccc' }} />
                <span style={{ color: activeItem === 'Moments' ? '#1890ff' : '#ccc' }}>Moments</span>
            </div>
            <div className={styles.item} onClick={() => setActiveItem('Sports')}>
                <EnvironmentFilled style={{ color: activeItem === 'Sports' ? '#1890ff' : '#ccc' }} />
                <span style={{ color: activeItem === 'Sports' ? '#1890ff' : '#ccc' }}>Sports</span>
            </div>
            <div className={styles.item} onClick={() => setActiveItem('User')}>
                <UserOutlined style={{ color: activeItem === 'User' ? '#1890ff' : '#ccc' }} />
                <span style={{ color: activeItem === 'User' ? '#1890ff' : '#ccc' }}>User</span>
            </div>
            {
                getUserName() === 'admin' && <div className={styles.item} onClick={() => setActiveItem('Profit')}>
                    <MoneyCollectOutlined style={{ color: activeItem === 'Profit' ? '#1890ff' : '#ccc' }} />
                    <span style={{ color: activeItem === 'Profit' ? '#1890ff' : '#ccc' }}>Profit</span>
                </div>
            }
        </div>
    );
}
